import {
  CloseCircleFilled,
  CopyOutlined,
  EditOutlined,
  EyeInvisibleOutlined,
  EyeOutlined,
  FileJpgOutlined,
  ShoppingOutlined
} from '@ant-design/icons';
import { Button, Input, InputRef, message, Tooltip } from 'antd';
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';

import ShapeIcon from '@/assets/svg/shape.svg';
import TextIcon from '@/assets/svg/text.svg';
import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import {
  LayerTypeBE,
  MAX_LAYER_NAME_LENGTH
} from '../../../../../../../constant';
import styles from './index.module.less';

const IconMap = {
  [LayerTypeBE.Image]: <FileJpgOutlined />,
  [LayerTypeBE.Product]: <ShoppingOutlined />,
  [LayerTypeBE.Text]: <TextIcon />,
  [LayerTypeBE.Shape]: <ShapeIcon />
};

const TypeMap = {
  [LayerTypeBE.Image]: 'image layer',
  [LayerTypeBE.Shape]: 'shape layer',
  [LayerTypeBE.Text]: 'text layer',
  [LayerTypeBE.Product]: 'product image layer'
};

interface Props {
  canCopy: boolean;
  layer: LayerInfoFE;
  onCopy: () => void;
  onRemove: (e) => void;
  onToggleHide: () => void;
  onChangeName: (name: string) => void;
}

const Header = ({
  layer,
  canCopy,
  onCopy,
  onRemove,
  onChangeName,
  onToggleHide
}: Props): JSX.Element => {
  const [isEditing, setIsEditing] = useState(false);
  const [name, setName] = useState('');
  const editNameRef = useRef<InputRef>();

  const handleEditName = (
    e: React.MouseEvent<HTMLSpanElement, MouseEvent>
  ): void => {
    e.stopPropagation();
    setIsEditing(true);
    setTimeout(() => {
      editNameRef.current.focus();
    });
  };

  const handleNameChange = (e: ChangeEvent<HTMLInputElement>): void => {
    if (e.target.value.length > MAX_LAYER_NAME_LENGTH) {
      message.warning(
        `Max length of name is ${MAX_LAYER_NAME_LENGTH} characters`
      );
      return;
    }
    setName(e.target.value);
  };

  const handleNameBlur = (): void => {
    if (name !== layer.data.name) {
      const newName = name || TypeMap[layer.data.type];
      onChangeName(newName);
      setName(newName);
    }
    setIsEditing(false);
  };

  const handleToggleHide = (
    e: React.MouseEvent<HTMLSpanElement, MouseEvent>
  ): void => {
    e.stopPropagation();
    onToggleHide();
  };

  const handleCopy = (
    e: React.MouseEvent<HTMLSpanElement, MouseEvent>
  ): void => {
    e.stopPropagation();
    onCopy();
  };

  const BaseEditButtons = (
    <>
      <Tooltip title="Show/Hide" arrowPointAtCenter mouseEnterDelay={1}>
        <Button
          type="text"
          className={styles['header-button']}
          onClick={handleToggleHide}
        >
          {layer.data.isHidden ? <EyeInvisibleOutlined /> : <EyeOutlined />}
        </Button>
      </Tooltip>
      <Tooltip title="Edit name" arrowPointAtCenter mouseEnterDelay={1}>
        <Button
          type="text"
          className={styles['header-button']}
          onClick={handleEditName}
        >
          <EditOutlined />
        </Button>
      </Tooltip>
    </>
  );

  useEffect(() => setName(layer.data.name), [layer.data.name]);

  return (
    <div className="flex justify-between items-center">
      <div className="flex items-center gap-1">
        {IconMap[layer.data.type]}
        {isEditing ? (
          <Input
            className="w-40"
            onClick={(e): void => e.stopPropagation()}
            ref={editNameRef}
            value={name}
            onChange={handleNameChange}
            onBlur={handleNameBlur}
          />
        ) : (
          <div className={styles['layer-name']} title={name}>
            {name}
          </div>
        )}
      </div>
      <div className="flex justfy-end items-center">
        {BaseEditButtons}
        <Tooltip title="Copy" arrowPointAtCenter mouseEnterDelay={1}>
          <Button
            type="text"
            className={styles['header-button']}
            onClick={handleCopy}
            disabled={!canCopy}
          >
            <CopyOutlined />
          </Button>
        </Tooltip>
        <Tooltip title="Remove" arrowPointAtCenter mouseEnterDelay={1}>
          <Button
            type="text"
            className={styles['header-button']}
            onClick={onRemove}
          >
            <CloseCircleFilled className={styles['delete-btn-icon']} />
          </Button>
        </Tooltip>
      </div>
    </div>
  );
};

export default Header;
